<script setup lang="ts">
import { computed } from 'vue'
import { ElCard, ElAvatar, ElTag, ElButton, ElSpace } from 'element-plus'
import { VideoPlay, Edit, Delete, Connection } from '@element-plus/icons-vue'
import type { SocialAccount } from '@/types'

interface Props {
  account: SocialAccount
}

const props = defineProps<Props>()

const emit = defineEmits<{
  edit: [account: SocialAccount]
  delete: [account: SocialAccount]
  login: [account: SocialAccount]
  logout: [account: SocialAccount]
  manage: [account: SocialAccount]
}>()

const platformIcon = computed(() => {
  const icons = {
    tiktok: '🎵',
    facebook: '📘',
    instagram: '📷',
    twitter: '🐦',
    youtube: '📺',
    linkedin: '💼'
  }
  return icons[props.account.platform as keyof typeof icons] || '📱'
})

const statusColor = computed(() => {
  switch (props.account.status) {
    case 'active':
      return 'success'
    case 'inactive':
      return 'danger'
    case 'suspended':
      return 'warning'
    case 'pending':
      return 'info'
    default:
      return 'info'
  }
})

const statusText = computed(() => {
  const statusMap = {
    active: '活跃',
    inactive: '未激活',
    suspended: '已暂停',
    pending: '待审核'
  }
  return statusMap[props.account.status] || '未知'
})

const handleLogin = () => {
  emit(props.account.status === 'active' ? 'logout' : 'login', props.account)
}
</script>

<template>
  <ElCard class="account-card" shadow="hover">
    <template #header>
      <div class="card-header">
        <div class="account-info">
          <ElAvatar :size="40" class="platform-avatar">
            {{ platformIcon }}
          </ElAvatar>
          <div class="account-details">
            <span class="account-username">{{ account.username }}</span>
            <span class="platform-name">{{ account.platform.toUpperCase() }}</span>
          </div>
        </div>
        <ElTag :type="statusColor" size="small">
          {{ statusText }}
        </ElTag>
      </div>
    </template>

    <div class="account-body">
      <div class="account-stats">
        <div class="stat-item">
          <span class="stat-label">粉丝数:</span>
          <span class="stat-value">{{ account.followers?.toLocaleString() || '未知' }}</span>
        </div>
        <div class="stat-item">
          <span class="stat-label">关注数:</span>
          <span class="stat-value">{{ account.following?.toLocaleString() || '未知' }}</span>
        </div>
        <div class="stat-item">
          <span class="stat-label">作品数:</span>
          <span class="stat-value">{{ account.posts?.toLocaleString() || '未知' }}</span>
        </div>
        <div v-if="account.lastLogin" class="stat-item full-width">
          <span class="stat-label">最后登录:</span>
          <span class="stat-value">{{ new Date(account.lastLogin).toLocaleString() }}</span>
        </div>
      </div>

      <div class="account-actions">
        <ElSpace>
          <ElButton
            :type="account.status === 'active' ? 'danger' : 'primary'"
            size="small"
            :icon="Connection"
            @click="handleLogin"
          >
            {{ account.status === 'active' ? '登出' : '登录' }}
          </ElButton>
          
          <ElButton
            type="success"
            size="small"
            :icon="VideoPlay"
            :disabled="account.status !== 'active'"
            @click="emit('manage', account)"
          >
            管理
          </ElButton>
          
          <ElButton
            type="warning"
            size="small"
            :icon="Edit"
            @click="emit('edit', account)"
          >
            编辑
          </ElButton>
          
          <ElButton
            type="danger"
            size="small"
            :icon="Delete"
            @click="emit('delete', account)"
          >
            删除
          </ElButton>
        </ElSpace>
      </div>
    </div>
  </ElCard>
</template>

<style scoped lang="scss">
.account-card {
  .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    
    .account-info {
      display: flex;
      align-items: center;
      gap: 12px;
      
      .platform-avatar {
        font-size: 18px;
      }
      
      .account-details {
        display: flex;
        flex-direction: column;
        
        .account-username {
          font-weight: 600;
          font-size: 14px;
          color: var(--el-text-color-primary);
        }
        
        .platform-name {
          font-size: 12px;
          color: var(--el-text-color-secondary);
        }
      }
    }
  }
  
  .account-body {
    .account-stats {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 8px;
      margin-bottom: 16px;
      
      .stat-item {
        display: flex;
        justify-content: space-between;
        font-size: 13px;
        
        &.full-width {
          grid-column: 1 / -1;
        }
        
        .stat-label {
          color: var(--el-text-color-regular);
        }
        
        .stat-value {
          font-weight: 600;
          color: var(--el-text-color-primary);
        }
      }
    }
    
    .account-actions {
      display: flex;
      justify-content: center;
    }
  }
}

@media (max-width: 768px) {
  .account-card {
    .account-body {
      .account-stats {
        grid-template-columns: 1fr;
        
        .stat-item.full-width {
          grid-column: 1;
        }
      }
      
      .account-actions {
        justify-content: stretch;
        
        .el-space {
          width: 100%;
          justify-content: space-between;
          flex-wrap: wrap;
          gap: 8px !important;
          
          .el-button {
            flex: 1;
            min-width: 60px;
          }
        }
      }
    }
  }
}
</style>